import React, { Component } from 'react'
import { Button, Pagination, Checkbox, FormControl, Icon, Popconfirm, Select, Table, Modal, Tree } from 'tinper-bee';
import Switch from 'bee-switch';
import {
    getBillType,
    doAdd,
    getApprovalList,
    deleteApproval,
    changeProcessStatus,
    doEdit,
    dataSyn,
    checkIsSyn,
    getApprovalUrl,
    getOrgUrl
} from '../Approval/Approval.config'
//import ShowTreeToast from '../WorkQuality/ShowTreeToast.jsx'
import CommonModal from './../../components/CommonModal/index.jsx';
import {
    vendorsDanger as danger,
    vendorsGetUrlParam as getUrlParam,
    vendorsTrimStr as trimStr,
    vendorsSuccess as success,
    vendorsWarning as warning,
    vendorsLongSuccess as longSuccess
} from 'utils/config.js';
import './index.less'
import App from "../../layout/App";

const Option = Select.Option;
const TreeNode = Tree.TreeNode;

let paramScope = 1;
import jdiwork from '../../utils/jdiwork'
let tenantId;
let userId;
let cookieStr = document.cookie.split(';').find(cur => cur.indexOf('tenantid=') != -1)
if(cookieStr){
     tenantId = cookieStr.split('=')[1];
     userId = document.cookie.split(';').find(cur => cur.indexOf('userId=') != -1).split('=')[1];
}
// let tenantId = 'x61tnmfx';
// let userId = 'be0077f7-74bb-4182-be75-e042cddd6c3a';
// let userCode = document.cookie.split(';').find(cur => cur.indexOf('_A_P_userLoginName=') != -1).split('=')[1];
// let token = document.cookie.split(';').find(cur => cur.indexOf('yht_usertoken=') != -1).split('=')[1];

let numberPerPage = 10;
export default class WorkQualityNewBuild extends Component {
    constructor(props) {
        super(props);
        let _me = this;
        this.state = {
            key: '',
            oneClickKeep: false,
            checkNameValue: "",
            tableKey: 1,
            sortKey: 1,
            param: {},
            showTree: false,
            productValue: '',
            errorDivFlag: '',
            trimDivFlag: '',
            noHasMoreModal: false,
            showKeepModal: false,
            showAddModal: false,
            errorWord: '', // 错误提示信息
            errorText: '',
            isCheckNameError: false, //检查项名称错误标识
            isCheckDescriptionError: false,//检查项描述错误标识
            currentRowIndex: '',//当前行下标
            // isBlank: false, // checkName是否为空
            showKeepBuildModal: false,
            DropSearchValue: '0',
            newQualityDataItem: {},
            showCloseModle: false,
            keepRepeat: false,
            iconCloseShow: false,
            pageStart: 0,
            pageSize: 15,
            activePage: 1,
            items: 1,
            visa: [], // 审批类型数组
            isAssignFilter: 0, // 团队审批指向开关
            selectVisaData: [], //创建时审批类型数据
            currentBill: {}, // 当前选中的类型
            currentSelectBill: {}, //创建时选中的类型
            isShowSyncModal: false,
            proccessName: '',
            focusIndex: '',
            defaultData: [
                {
                    key: 1,
                    checkcode: '001',
                    checkitem: '',
                    checkdescription: '',
                    needphoto: false,
                    needmeasurement: false,
                    'formflagy': '',
                    'keeprepeat': '',
                }
            ],
            buildData: [],
            approvalList: [],
            currentColumnList: [],
            processName: '',
            showModal: false,
            columns: [
                {
                    title: "序号",
                    dataIndex: "number",
                    key: "key",
                    width: "50px",
                },
                {
                    title: "流程名称",
                    dataIndex: "processName",
                    key: "checkitem",
                    width: "220px",
                    render: (text, record, index) => {
                        return (
                            <div className='div_small'>
                                <FormControl
                                    placeholder='50个汉字、英文、数字、符号以内'
                                    onChange={this.onContentChange(index, 'processName')}
                                    className={this.state.isCheckNameError && this.state.focusIndex == index ? 'input-border-format input-border-error' : 'input-border-format'}
                                    value={record.processName}
                                    id={index}
                                    onFocus={() => {
                                        this.getFocus(index)
                                    }}
                                    onBlur={() => {
                                        this.inputOnBlur(index)
                                    }}
                                    autoFocus={record.isShowEdit ? true : false}
                                    onKeyPress={this.inputKeyPress} />
                                <div className={record.isShowEdit ? 'show icon-group-container' : 'hidden'}>
                                    <span
                                        onClick={this.handleConfirmAdd}
                                        className='fl confirm edit-icon'></span>
                                    <span
                                        onClick={this.handleCancelAdd}
                                        className='fl cancel edit-icon'></span>
                                </div>
                                <div className={record.isShowEdit ? 'hidden' : 'show icon-group-container'}>
                                    <span
                                        onClick={() => {
                                            this.handleditApproval(index)
                                        }}
                                        className='fl edit edit-icon'></span>
                                </div>
                            </div>
                        )
                    }
                },
                {
                    title: "类型",
                    dataIndex: "billName",
                    key: "billName",
                    width: "80px"
                },
                {
                    title: "指派时团队过滤",
                    dataIndex: "isAssignFilter",
                    key: "isAssignFilter",
                    width: "80px",
                    render(text, record, index) {
                        return (<Switch
                            disabled={record.isShowEdit ? false : true}
                            checked={record.isAssignFilter}
                            onChange={(data) => {
                                _me.teamFilteringChange(data, record, index)
                            }}
                        />)
                    }
                },
                {
                    title: "状态",
                    dataIndex: "activeyKey",
                    key: "activeyKey",
                    width: "150px",
                    render(text, record, index) {
                        return (<span>
                            <b className={text === '启用' ? 'enable' : 'not--enable'}></b>
                            {text}
                        </span>)
                    }
                },
                {
                    title: "操作",
                    dataIndex: "operation",
                    key: "operation",
                    width: "100px",
                    className: 'operation-style-optimize',
                    render(text, record, index) {
                        return (
                            <div className="hrowop">
                                <span
                                    className="line-padding"
                                    onClick={() => {
                                        _me.configApproval(record)
                                    }}
                                >配置审批流  </span>|
                                <span
                                    className="line-padding"
                                    onClick={() => {
                                        _me.handleChangeStatus(index)
                                    }}>{record.activeyKey === '停用' ? '启用' : '停用'}  </span>|
                            <Popconfirm
                                    trigger="click"
                                    placement="top"
                                    rootClose={true}
                                    onClose={() => {
                                        _me.deleteItem(index)
                                    }}
                                    content={
                                        <div className="table-delete clearfix">
                                            <i className="uf uf-exc-c hdelwarning"></i>
                                            <span className="hdelspan">确认删除审批流?</span>
                                        </div>}>
                                    <span className="line-padding">删除</span>
                                </Popconfirm>
                            </div>
                        );
                    }
                }
            ],
            normalOrgName: '默认组织名称',
            orgTreeData: [],
            checkedKeys: [],
            orgKey: null,
            checkName: '',
            searchValue: ''
        }
    }
    componentDidMount() {
        //检查是否同步过数据
        if(tenantId){
            this.checkIsSynAction()
            //获取单据类型
            this.getBillTypeAction()
            // 获取组织信息方法函数
            this.handlerGetOrgMethod();
        }else {
            jdiwork().getContext((data) => {
                tenantId = data.tenantid;
                userId = data.userid;
                this.checkIsSynAction()
                //获取单据类型
                this.getBillTypeAction()
                // 获取组织信息方法函数
                this.handlerGetOrgMethod();
            });
        }

    }
    getBillTypeAction =()=>{
        getBillType({ tenantId: tenantId }).then((res) => {
            if (res.data.resultCode !== 'busi_ex') {
                let data = res.data.result;
                let currentBill = {};
                if (data[0]) {
                    currentBill = data[0];
                }
                this.setState({
                    visa: data,
                    currentBill: currentBill
                }, () => {
                    //获取流程列表
                    this.getApproval();
                });

            }
        });
    }
    checkIsSynAction =()=>{
        checkIsSyn({ tenantId: tenantId }).then((res) => {
            let result = res.data.result;
            if (result === null) {
                // warning({ text: '首次配置审批流，需同步数据' });
                this.setState({
                    isShowSyncModal: true
                });
            }
        });
    }

    handlerGetOrgMethod = () => {
        getOrgUrl({ pkTenant: tenantId }).then((res) => {
            if (res.data.resultCode !== 'busi_ex') {
                let data = res.data.result;
                // data.pkOrganization = 'first-node';
                this.setState({
                    normalOrgName: data.sname,
                    orgTreeData: [data]
                });
            }
        })
    }
    //获取流程列表
    getApproval = (e) => {
        let pageStart = '';
        if (e) {
            pageStart = e
        } else {
            pageStart = this.state.activePage
        }
        let billType = this.state.currentBill.scode;
        let param = {};
        if (this.state.orgKey === 'null') {
            param = {
                tenantId: tenantId,
                pageStart: numberPerPage * (pageStart - 1),
                pageSize: numberPerPage,
                billType: billType || null,
                ieStamp: new Date().getTime()
            }
        } else {
            param = {
                tenantId: tenantId,
                pageStart: numberPerPage * (pageStart - 1),
                pageSize: numberPerPage,
                billType: billType || null,
                pkOrg: this.state.orgKey,
                ieStamp: new Date().getTime()
            }
        }

        getApprovalList(param).then((res) => {
            if (res.data.resultCode !== 'busi_ex') {
                let list = res.data.result.objects;
                let pages = Math.ceil(res.data.result.count / numberPerPage);
                list.forEach((cur, index, arr) => {
                    cur.isShowEdit = false;
                });
                this.setState({
                    approvalList: list,
                    items: pages
                });
            } else {
                let text = res.data.exMsg;
                danger({ text: text });
            }
        });
    }

    //指派时团队过滤开关
    teamFilteringChange = (data, record, index) => {
        let currentArr = [...this.state.approvalList];
        let isAssignFilter = data ? 1 : 0;
        currentArr[index].isAssignFilter = isAssignFilter;
        this.setState({
            approvalList: currentArr
        });
    }

    // 删除流程
    deleteItem = (index) => {
        let currentList = [...this.state.approvalList];
        let currentItem = currentList[index];
        let param = { ...currentItem, userId };
        if (param.processStatus === 'stop') {
            deleteApproval(param).then((res) => {
                if (res.data.resultCode === 'ok') {
                    success({ text: '删除成功' });
                    this.getApproval();
                } else {
                    let text = res.data.exMsg;
                    danger({ text: text });
                }
            });
        } else {
            let text = '启用的审批流不允许删除';
            danger({ text: text });
        }
    }

    //配置审批流
    configApproval = (params) => {
        if(params.isShowEdit){
            danger({text: '没有保存审批流'});
            return;
        }
        let req = { ...params, userId };
        getApprovalUrl(req).then((res) => {
            if (res.data.resultCode !== 'busi_ex') {
                let url = res.data.result;
                // parent.location.href = url;
                window.open(url);
            } else {
                danger({ text: res.data.exMsg })
            }
        });
    }

    //启用停用流程
    handleChangeStatus = (index) => {
        let currentList = [...this.state.approvalList];
        let currentItem = currentList[index];
        let param = { ...currentItem, userId, pkOrg: this.state.orgKey, scope: paramScope };
        if (param.processStatus === 'stop') {
            param.processStatus = 'start'
        } else {
            param.processStatus = 'stop'
        }
        // 解决新建审批流时不保存可以直接启用null值审批流
        if(param.changeFlag === 'new') {
            warning({text: '请保存后再进行操作'});
            return;
        };
        changeProcessStatus(param).then((res) => {
            if (res.data.resultCode === 'ok') {
                let result = res.data.result;
                currentList.splice(index, 1, result);
                this.setState({
                    approvalList: currentList
                });
                success({ text: '状态成功切换' })
            } else {
                let text = res.data.exMsg;
                danger({ text: text })
            }
        });
    }

    inputKeyPress = (e) => {
        let keyName = e.nativeEvent.key;
        if (keyName === 'Enter') {
            let currentIndex = this.state.focusIndex
            let currentList = [...this.state.approvalList];
            let domItem = document.getElementById(currentIndex);
            if (currentIndex !== '') {
                let item = currentList[currentIndex];
                let billParams = { ...this.state.currentBill }
                let param = {
                    userId: userId,
                    billType: billParams.scode,
                    billName: billParams.sname,
                    processName: item.processName,
                    pkTenant: tenantId,
                    pkOrg: this.state.orgKey,
                    scope: paramScope,
                    orgName: this.state.normalOrgName,
                    isAssignFilter: item.isAssignFilter
                }
                if (param.processName === '') {
                    danger({ text: '流程名称不能为空' });
                    this.setState({
                        isCheckNameError: true
                    });
                    return;
                }
                if (item.changeFlag === 'new') {
                    doAdd(param).then((res) => {
                        if (res.data.resultCode === 'busi_ex') {
                            danger({
                                text: res.data.exMsg
                            })
                        } else {
                            success({ text: '添加成功' });
                            domItem.blur();
                            this.getApproval();
                        }
                    });
                } else {
                    let param = { ...item, userId, pkOrg: this.state.orgKey, scope: paramScope };
                    doEdit(param).then((res) => {
                        if (res.data.resultCode === 'busi_ex') {
                            danger({
                                text: res.data.exMsg
                            })
                        } else {
                            success({ text: '编辑成功' })
                            domItem.blur();
                            this.getApproval();
                        }
                    });
                }
            }
        }
    }

    getFocus = (index) => {
        let currentList = [...this.state.approvalList];
        currentList.forEach((cur, index, arr) => {
            cur.isShowEdit = false;
        });
        let currentItem = currentList[index];
        currentItem.isShowEdit = true;
        currentList.splice(index, 1, currentItem);
        this.setState({
            focusIndex: index,
            approvalList: currentList
        })
    }

    inputOnBlur = (index) => { }

    handleConfirmAdd = () => {
        let _me = this;
        let currentIndex = this.state.focusIndex
        if (currentIndex !== '') {
            let currentList = [...this.state.approvalList];
            let item = currentList[currentIndex];
            // billType暂时只有一个，以后处理多个情况，先固定处理
            let billParams = { ...this.state.currentBill }
            let param = {
                userId: userId,
                billType: billParams.scode,
                billName: billParams.sname,
                processName: item.processName,
                pkTenant: tenantId,
                pkOrg: this.state.orgKey,
                scope: paramScope,
                orgName: this.state.normalOrgName,
                isAssignFilter: item.isAssignFilter
            }
            if (param.processName === '') {
                danger({ text: '流程名称不能为空' });
                _me.setState({
                    isCheckNameError: true
                });
                return;
            }
            if (item.changeFlag === 'new') {
                doAdd(param).then((res) => {
                    if (res.data.resultCode === 'busi_ex') {
                        danger({
                            text: res.data.exMsg
                        })
                    } else {
                        success({ text: '添加成功' });
                        _me.getApproval();
                    }
                });
            } else {
                let param = { ...item, userId, pkOrg: this.state.orgKey, scope: paramScope };
                doEdit(param).then((res) => {
                    if (res.data.resultCode === 'busi_ex') {
                        danger({
                            text: res.data.exMsg
                        })
                    } else {
                        success({ text: '编辑成功' })
                        this.getApproval();
                    }
                });
            }
        }
    }

    handleCancelAdd = () => {
        let _me = this;
        let currentIndex = this.state.focusIndex;
        let currentList = [...this.state.approvalList];
        if (currentIndex !== '') {
            let item = currentList[currentIndex];
            if (item.changeFlag === 'new') {
                currentList.splice(currentIndex, 1);
                this.setState({
                    approvalList: currentList
                });
            } else {
                item.isShowEdit = false;
                currentList.splice(currentIndex, 1, item);
                this.setState({
                    approvalList: currentList
                });
            }
        }
    }

    handleditApproval = (index) => {
        let domItem = document.getElementById(index);
        domItem.focus();
    }

    onNameChange = (e) => {
        let value = e.target.value;
        let reg = /^\s*$/;
        if (value.length > 50) {
            this.setState({ errorWord: '请限制在50个字符之内' });
        }
        if (value.length >= 50) {
            value = value.substring(0, 50);
        }
        if (!reg.test(value)) {
            this.setState({ errorDivFlag: '' })
        }
        if (value.length < 50) {
            this.setState({ errorWord: '' });
        }
        let checkname = value;
        let checkNameValue = value;
        checkname = trimStr(checkname);
        this.setState({ newQualityDataItem: { ...this.state.newQualityDataItem, checkname }, checkNameValue })
    };
    onShowTree = () => {
        this.setState({ showTree: true })
    };
    onCloseTree = () => {
        this.setState({ showTree: false })
    };
    handleDropSearch = (value) => {
        let checktype = value;
        this.setState({ newQualityDataItem: { ...this.state.newQualityDataItem, checktype } })
    };
    handleAdd = () => {
        let currentBill = this.state.currentBill;
        let newItem = {
            "changeFlag": 'new',
            "dr": 0,
            "pkProcessDefinition": null,
            "billType": null,
            "billName": currentBill.sname || null,
            "processName": null,
            "processKey": null,
            "processStatus": "stop",
            "processId": null,
            "pkOrg": null,
            "userId": null,
            "pkTenant": null,
            "creator": null,
            "creationtime": null,
            "modifier": null,
            "modifytime": null,
            "isShowEdit": true,
            "isAssignFilter": 0
        }
        let currentList = [...this.state.approvalList];
        let length = currentList.length;
        if (currentList[length - 1] && currentList[length - 1]['changeFlag'] === 'new') {
            danger({
                text: '请完成当前流程创建'
            })
            return;
        } else {
            currentList.push(newItem);
            this.setState({
                approvalList: currentList
            });
        }
    };

    closeAddModal = () => {
        this.setState({
            showAddModal: false
        });
    }

    onContentChange = (index, ContentValue) => {
        return (e) => {
            let reg = /^\s*$/;
            let value = e.target.value;
            let buildData = [...this.state.approvalList];
            if (ContentValue === 'processName') {
                //重置边框颜色
                this.setState({
                    isCheckNameError: false
                });
                if (value.length > 50) {
                    this.setState({
                        isCheckNameError: true
                    });
                    danger({ 'text': '请限制在50个字符之内' });
                }
                if (value.length >= 50) {
                    value = value.substring(0, 50);
                }
                if (!reg.test(value)) {
                    buildData[index]['formflagy'] = '';
                }
            }
            if (ContentValue === 'checkdescription') {
                //重置边框颜色
                this.setState({
                    isCheckDescriptionError: false
                });
                if (value.length > 50) {
                    this.setState({
                        isCheckDescriptionError: true
                    });
                    danger({ 'text': '请限制在50个字符之内' });
                }
                if (value.length >= 50) {
                    value = value.substring(0, 50);
                }
            }

            let checkname = value;
            buildData[index][ContentValue] = checkname;
            this.setState({ approvalList: buildData, processName: checkname })
        };
    };

    cogradientData = () => {
        let param = {
            userId: userId,
            tenantId: tenantId
        };
        dataSyn(param).then((res) => {
            let resultCode = res.data.resultCode;
            if (resultCode === 'ok') {
                longSuccess({ text: res.data.result });
            } else {
                danger({
                    text: res.data.exMsg
                })
            }
        });
    };
    handleCloseModel = () => {
        this.setState({
            showCloseModle: false
        })
    };
    handleJumpQuality = () => {
        this.setState({
            showCloseModle: false
        });
        let { start, size } = this.state.param;
        window.location.href = `/workquality.html?start=${start}&size=${size}`
    };
    keepModalClose = () => {
        this.setState({
            showKeepModal: false
        });
    };
    KeepFinishJump = () => {
        this.setState({
            showKeepModal: false
        });
        let key = this.state.key;
        let { start, size } = this.state.param;
        window.location.href = `/workqualityitem.html?key=${key}&start=${start}&size=${size}`
    };
    keepKeepBuildClose = () => {
        this.setState({
            showKeepBuildModal: false
        });
    };
    KeepJumpBuild = () => {
        this.setState({
            showKeepModal: false
        });
        let { start, size } = this.state.param;
        window.location.href = `/workqualitynewbuild.html?start=${start}&size=${size}`
    };
    handleToastSearch = (productValue, pkProcedure) => {
        this.setState({ iconCloseShow: true, productValue, newQualityDataItem: { ...this.state.newQualityDataItem, procedurename: productValue, pkProcedure } }, () => {
            this.onCloseTree();
        })
    };
    onCloseShow = () => {
        let newQualityDataItem = this.state.newQualityDataItem;
        for (let key in newQualityDataItem) {
            if (key === 'pkProcedure') {
                newQualityDataItem['procedurename'] = '';
                newQualityDataItem['pkProcedure'] = ''
            }
        }
        this.setState({
            newQualityDataItem,
            iconCloseShow: false,
            productValue: ''
        })
    };

    handleBillTypeClick = (e, item) => {
        let data = this.state.approvalList;
        let currentBill = { ...item };
        this.setState({
            activePage: 1,
            currentBill: currentBill,
            // currentColumnList: tableData
        }, () => {
            this.getApproval();
        });
    }

    handleSelectPage = (e) => {
        this.setState({
            activePage: e
        });
        this.getApproval(e);
    }

    handleSyncButton = () => {
        this.setState({
            isShowSyncModal: false
        });
    }
    handleOrganizeChange = () => {
        this.setState({
            showModal: true,
            searchValue: ''
        });
    }
    onhide = () => {
        this.setState({
            showModal: false
        });
    }
    onCheck = (checkedKeys, e) => {
        console.log('mumu-onCheck', e)
        if (e.node.props.eventKey !== 'null') {
            paramScope = 0;
        } else {
            paramScope = 1;
        }
        let checkedKey = checkedKeys.pop();
        checkedKeys = [];
        checkedKeys.push(checkedKey);
        this.setState({
            checkedKeys,
            orgKey: checkedKey === 'null' ? null : checkedKey,
            checkName: e.node.props.title.props.children[0] + e.node.props.title.props.children[1].props.children + e.node.props.title.props.children[2]
        });
    }
    loop = data => data.map((item) => {
        if(item.sname) { // 集成diwork后，该值在初始化时为null，需要做一步判断
            const index = item.sname.search(this.state.searchValue);
            const beforeStr = item.sname.substr(0, index);
            const afterStr = item.sname.substr(index + this.state.searchValue.length);
            const title = index > -1 ? (
                <span>
                    {beforeStr}
                    <span className="u-tree-searchable-filter">{this.state.searchValue}</span>
                    {afterStr}
                </span>
            ) : <span>{item.sname}</span>
    
            if (item.children && item.children.length) {
                return <TreeNode key={item.pkOrganization} title={title}>{this.loop(item.children)}</TreeNode>;
            }
            return <TreeNode key={item.pkOrganization} title={title} />;
        }
    })
    handlerOrgSearchText = (e) => {
        let value = e.target.value;
        this.setState({
            orgSearchText: value
        });
    }
    handlerChooseOrgBtn = () => {
        this.setState({
            searchValue: this.state.orgSearchText
        });
        // 定位树节点
        setTimeout(() => {
            document.getElementsByClassName("u-tree-searchable-filter")[0].scrollIntoView();
        }, 0);
    }
    getModalContext = () => {
        console.log('mumu-this.state.orgTreeData', this.state.orgTreeData)
        console.log('mumu-this.state.checkedKeys', this.state.checkedKeys)
        return (
            <div>
                <div className="clearfix">
                    <FormControl
                        size="lg"
                        className="fl org--search"
                        placeholder="请输入名称"
                        onChange={this.handlerOrgSearchText}
                    />
                    <a href="javascript:;" className="org--search__btn fl" onClick={this.handlerChooseOrgBtn}></a>
                </div>
                <Tree checkable
                    checkStrictly
                    onCheck={this.onCheck}
                    checkedKeys={this.state.checkedKeys}
                >
                    {this.loop(this.state.orgTreeData)}
                </Tree>
            </div>
        )
    }
    handlerDeleteConfirm = () => {
        this.setState({
            showModal: false,
            normalOrgName: this.state.checkName
        }, () => {
            this.getApproval()
        });
    }
    render() {
        let data = [...this.state.approvalList];
        let { checkname } = this.state.newQualityDataItem;
        data.forEach((cur, index, arr) => {
            let temp = (index + 1).toString();
            temp = temp.length < 2 ? 0 + temp : temp;
            cur.number = temp;
            if (cur.processStatus === 'stop') {
                cur.activeyKey = '停用'
            } else {
                cur.activeyKey = '启用'
            }
        });
        return (
            <App>
                <CommonModal show={this.state.showModal}
                    // cancel={this.handlerDeleteClose}
                    confirm={this.handlerDeleteConfirm}
                    content={this.getModalContext()}
                    hide={this.onhide}
                    backdrop={true}
                    size={'lg'}
                    title={'选择组织'}
                    oneButton={true}
                    oneButtonText={'确定'}
                >
                </CommonModal>
                <div className='qualityNewBuild-containers'>
                    <div className='qualityNewBuild-containers__header clearfix'>
                        <div className='qualityNewBuild-containers__headerSearch clearfix fl'>
                            <div className="hbodyopeleft clearfix fl">
                                <h4 className="fl organize--name">
                                    组织名称 :
                                </h4>
                                <div className="organize--select fl clearfix">
                                    <span className="fl">{this.state.normalOrgName}</span>
                                    <Button className="fl organize--btn" colors="primary" onClick={this.handleOrganizeChange}>请选择</Button>
                                </div>
                            </div>
                            <div className="hbodyoperight fr">
                                <Button className="button-style-format" colors="primary" onClick={this.handleAdd}>创建</Button>
                                <Button className="button-style-format qualityNewBuild-containers__headerTitle_buttonGroup_cancel" bordered onClick={this.cogradientData}>同步数据</Button>
                                <div className={this.state.isShowSyncModal ? "show approval-sync-toast-bg" : "hidden"}>
                                    <p className="approval-sync-word">首次配置审批流时需同步数据。</p>
                                    <p>
                                        <span className="approval-sync-confirm" onClick={this.handleSyncButton}>知道了</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div className='qualityNewBuild-containers__headerTitle fl'>
                            <div className="margin--16">
                                <p className="approval-type-word fl style-format">单据类型：</p>
                                <ul className="fl">
                                    {this.state.visa.map((item, index) => {
                                        return <li
                                            key={item.scode}
                                            className={this.state.currentBill.scode && this.state.currentBill.scode === item.scode ? "approval-bill-type approval-bill-type-active fl" : 'approval-bill-type fl'}
                                            onClick={(e) => {
                                                this.handleBillTypeClick(e, item)
                                            }}>{item.sname}</li>
                                    })}
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div className='qualityNewBuild-containers__footer'>
                        <div className='qualityNewBuild-containers__footerCenter'>
                            <Table
                                bordered
                                data={data}
                                columns={this.state.columns}
                            />
                            <div>
                                <Pagination style={{ float: 'right', margin: '5px 0' }}
                                    first
                                    last
                                    prev
                                    next
                                    boundaryLinks
                                    items={this.state.items}
                                    maxButtons={5}
                                    activePage={this.state.activePage}
                                    onSelect={this.handleSelectPage}
                                />
                                <div style={{ height: '35px' }}></div>
                            </div>
                        </div>
                    </div>
                </div>
            </App>
        )
    }
}
